<template>
	<view>
		<view class="search-date">
			<u-calendar v-model="show" mode="date" @change="change"></u-calendar>
			<u-input v-model="value" type="text" placeholder="2021-7-18" placeholder-style="color:#248ee8;"
				:height="30" />
			<view class="date-icon" @click="show = true">
				<image src="../../static/images/date.png" mode=""></image>
			</view>
		</view>
		<view class="record-list">
			<view class="record-card">
				<view class="record-card__hd">
					<view class="record-card__bed">A床</view>
					<view class="record-card__ks">内科</view>
				</view>
				<view class="record-card__bd">
					<view class="record-info clearfix">
						<view class="item">
							姓名：<text>旷岩状</text>
						</view>
						<view class="item">
							住院号：<text>123456</text>
						</view>
						<view class="item item-lg">
							操作：<text>PICC管更换</text>
						</view>
					</view>
					<view class="record-bt">
						<view class="record-date">
							日期：2021/02/14  12:14:20
						</view>
						<view class="record-name">
							江姝先
						</view>
					</view>
				</view>
			</view>
			<view class="record-card">
				<view class="record-card__hd">
					<view class="record-card__bed">A床</view>
					<view class="record-card__ks">内科</view>
				</view>
				<view class="record-card__bd">
					<view class="record-info clearfix">
						<view class="item">
							姓名：<text>旷岩状</text>
						</view>
						<view class="item">
							住院号：<text>123456</text>
						</view>
						<view class="item item-lg">
							操作：<text>PICC管更换</text>
						</view>
					</view>
					<view class="record-bt">
						<view class="record-date">
							日期：2021/02/14  12:14:20
						</view>
						<view class="record-name">
							江姝先
						</view>
					</view>
				</view>
			</view>
			<view class="record-card">
				<view class="record-card__hd">
					<view class="record-card__bed">A床</view>
					<view class="record-card__ks">内科</view>
				</view>
				<view class="record-card__bd">
					<view class="record-info clearfix">
						<view class="item">
							姓名：<text>旷岩状</text>
						</view>
						<view class="item">
							住院号：<text>123456</text>
						</view>
						<view class="item item-lg">
							操作：<text>PICC管更换</text>
						</view>
					</view>
					<view class="record-bt">
						<view class="record-date">
							日期：2021/02/14  12:14:20
						</view>
						<view class="record-name">
							江姝先
						</view>
					</view>
				</view>
			</view>
		</view>
		<view class="share-bar fixed"><u-icon name="share-fill" size="30"></u-icon>分享</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value: '',
				show: false,
			}
		},
		onLoad() {

		},
		methods: {
			change(e) {
				console.log(e);
				this.value = e.result
			},
		}
	}
</script>

<style lang="scss" scoped>
	.search-date {
		position: relative;
		padding: 20rpx 30rpx;
		background-color: #fff;
	}

	.date-icon {
		width: 60rpx;
		height: 60rpx;
		position: absolute;
		right: 28rpx;
		top: 50%;
		margin-top: -30rpx;
		z-index: 11;
	}

	.date-icon image {
		width: 100%;
		height: 100%;
	}
	
	.record-list{
		padding: 20rpx 30rpx;
	}
	
	.record-card{
		background-color: #fff;
		margin-bottom: 20rpx;
		 border-radius:0 0 16rpx 16rpx;
	}
	
	.record-card__hd{
		border-radius: 16rpx 16rpx 0 0;
		padding: 13rpx 20rpx;
		font-size: 32rpx;
		line-height: 40rpx;
		color: #fff;
		display: flex;
		align-items: center;
		background-image: linear-gradient(#4ac6ff,#02a0e8);
	}
	
	.record-card__bed{
		margin-right: 30rpx;
	}
	
	.record-card__bd{
		padding: 14rpx 20rpx;
	}
	
	.record-info .item{
		font-size: 32rpx;
		color: #8d8e95;
		float: left;
		width: 50%;
		line-height: 60rpx;
	}
	
	.item-lg{
		width: 100%;
	}
	
	.record-info .item text{
		font-size: 30rpx;
		color: #333333;
	}
	
	.record-bt{
		display: flex;
		align-items: center;
		justify-content: space-between;
		line-height: 60rpx;
	}
	
	.record-date{
		font-size: 26rpx;
		color: #8d8e95;
	}
	
	.record-name{
		font-size: 24rpx;
		color: #8d8e95;
	}
	
	.share-bar{
		text-align: center;
		font-size: 36rpx;
		color: #fff;
		background-color: #00a4e8;
		height: 96rpx;
		padding: 20rpx 30rpx;
		line-height: 56rpx;
	}
	
	.share-bar .u-icon{
		margin-right: 14rpx;
	}
	
	.fixed{
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 111;
	}
</style>
